<template>
<div class="zuida" v-cloak>
  <div class="search">
    <div class="back" @click="back">
      <i class="el-icon-arrow-left"></i>
    </div>
    <el-input
    placeholder="你想知道的,我这里全有~"
    prefix-icon="el-icon-search"
    clearable
    :plain='true'
    v-model="input" @keyup.enter.native="tiao" ref='input'>
  </el-input>
  <div class="faqi" @click="tiao" >搜索</div>
  <!-- <button>搜索</button> -->
  </div>
  <div class="lishi">
    <div class="del">
      
      <div class="zuo">历史记录</div>
      <div class="you" @click="delall" v-if='lishi'><i class="el-icon-delete"></i></div>
      
    </div>
    <div class="sc" >
      <div class="shan" v-for="(item,index) in lishi" :key="index">
        <div class="icon" @click="del(item.id)"><i class="el-icon-circle-close"></i></div>
        <div class="zi" @click="dian(item.title)">{{item.title}}</div>
        </div>
    </div>
    <div class="kong" ref="kong">
      <i class="el-icon-moon-night"></i>您暂时还未搜过东西,这里空空如也~
    </div>
  </div>
  <div class="bangdan">
    <rebang></rebang>
  </div>
  
</div>
</template>
<script>
import rebang from './zujian/rebang.vue'
  export default {
    data() {
      return {
        user:'',
        input:'',
        lishi:[]
      };
    },
    components:{
      rebang
    },
    methods:{
      back(){
        this.$router.go(-1)
      },
      tiao(){
        if(this.user&&this.input!==''){
          this.axios.post('/jialishi',{
          idd:this.user.id,
          title:this.input
        })
        this.$router.push('/jieguo/'+this.input)
        }
        else{
        this.$message({
          message:'搜索区域不可为空!',
          type:'warning'
        });
      }

      },
      dian(title){
        this.$router.push('/jieguo/'+title)
      },
      del(index){
        // console.log(index);
        // this.lishi.splice(index,1)
        this.axios.get('/del/'+index).then((res)=>{
          this.$router.go(0)
          // console.log('删除成功!');
        })
        // this.list.
      },
      delall(){
        // this.lishi=[]
        this.axios.get('/delall/'+this.user.id).then((res)=>{
          this.$router.go(0)
          // console.log('删除成功!');
        })
      }
    },
    created(){
      var user=JSON.parse(sessionStorage.getItem("user"))
      // console.log(user);
      this.user=user
      if(this.user===null){
        this.lishi=[]
        // this.$refs.kong.style.display='block'
      }
      else{
        this.axios.get('/lishi/'+this.user.id).then((res)=>{
          // console.log(res);
          this.lishi=res.data
        })
      }
      this.$store.commit('bian')
      this.$nextTick(() => {
      this.$refs.input.focus()
    })
    },
    watch:{
      lishi(newdata,olddata){
        if(newdata.length===0){
          this.$refs.kong.style.display='block'
        }
        else{
          this.$refs.kong.style.display='none'
        }
        // console.log(newdata);
      }
    },
    mounted(){
      
    }
  }
</script>
<style lang="less" scoped>
  .zuida{
    margin: 0 auto;
    // margin-top: -20px;
    width: 50%;
    // height: 1000px;
    background-color: #2aaa5163;
    border-radius: 10px;
    box-shadow: 1px 1px 15px #264c24;
    padding-top: 34px;
  }
  .kong{
    display: none;
    font-size: 20px;
    width: 100%;
    height: 140px;
    // background-color: cadetblue;
    line-height: 140px;
    text-align: center;
  }
  .search{
    display: flex;
    margin: 0 auto;
    // margin-top: 30px;
    width: 100%;
    height: 54px;
    // background-color: skyblue;
    line-height: 54px;
    input{
      font-size: 30px;
    }
  }
  .back{
    font-size: 30px;
    line-height: 54px;
    margin-left: 10px;
  }
  /deep/ .el-input__inner{
    background-color: #a3c59f;
    // color: red;
    font-size: 20px;
    border-radius: 20px;
  }
  .faqi{
    width: 94px;
    font-size: 20px;
    text-align: center;
  }
  /deep/ .el-input__icon{
    font-size: 20px;
  }
  /deep/ .el-input{
    margin-left: 10px;
  }
  /deep/ .el-input__prefix{
    color: #6c7570;
  }
  .lishi{
    // position: relative;
    margin: 0 auto;
    width: 100%;
    // height: 800px;
    // background-color: aquamarine;
    .del{
      display: flex;
      justify-content:space-between;
      width: 100%;
      height: 50px;
      line-height: 50px;
      // background-color: rgb(242, 255, 127);
      .zuo{
        font-size: 22px;
        margin-left: 20px;
      }
      .you{
        font-size: 22px;
        margin-right: 20px;
      }
    }
    .sc{
      width: 100%;
      // height: 600px;
      // background-color: blueviolet;
      margin: 0 auto;
      display: flex;
      flex-wrap:wrap;
      .shan{
        position: relative;
        margin: 5px 20px;
        padding: 5px;
        font-size: 16px;
        border: #647b66 solid 1px;
        height: 20px;
        // background-color: aqua;
        border-radius: 4px;
        .icon{
          z-index: 1;
          width: 16px;
          height: 19px;
          // background-color: yellow;
          right: -8px;
          top: -8px;
          position: absolute;
        }
      }
    }
  }
  .bangdan{
    width: 54%;
    margin: 0 auto;
    margin-top: 50px;
    // margin-bottom: 20px;
    // height: 500px;
  }
  [v-cloak]{
    display: none;
  }
  // .zuo
</style>